 @charset "utf-8";
 * {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 .st{
     margin-left: 10px;
 }
 .container {
     width: 100%;
     height: 100px;
     margin: 0px auto;
     transition: transform .5s ease-in-out;
     position: relative;
     
     perspective: 1000px;
     
     transform-style: preserve-3d;
 }
 
 .front,
 .back {
    width: 100%;
    height: 100px;
    
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transition: 0.6s ease-out;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .front img,
 .back img {
     width: 200px;
     height: 290px;
     overflow: hidden;
 }
 
 .front {
     transform: rotateY(-180deg);
 }
 
 .back {
     transform: rotateY(0deg);
 }

 
 .container:hover .back {
     transform: rotateY(180deg);
 }
 
 .container:hover .front {
     transform: rotateY(0deg);
 }